<script setup lang="ts">
import { ref } from 'vue'
import PricingCard from '@/components/common/PricingCard.vue'
import { ElMessage, ElMessageBox } from 'element-plus'

interface PricingPlan {
  id: string
  name: string
  price: number
  period: string
  color: string
  hasPromotion: boolean
  features: string[]
  benefits: string[]
}

const pricingPlans = ref<PricingPlan[]>([
  {
    id: 'annual',
    name: '超值会员套餐',
    price: 99,
    period: '年',
    color: '#FF6B00',
    hasPromotion: false,
    features: [
      '无限考试信息发布',
      '高级数据分析报告',
      '优先客服支持',
      '自定义品牌设置',
      'API接口访问',
      '数据导出功能',
      '专属活动通知',
      '年度学习报告'
    ],
    benefits: ['最划算', '平均每月仅需8.25元', '赠送2个月会员']
  },
  {
    id: 'semi-annual',
    name: '元/半年套餐',
    price: 60,
    period: '半年',
    color: '#007AFF',
    hasPromotion: false,
    features: [
      '无限考试信息发布',
      '基础数据统计',
      '在线客服支持',
      '移动端访问',
      '消息推送服务',
      '学习进度跟踪'
    ],
    benefits: ['性价比高', '平均每月10元', '赠送1个月会员']
  },
  {
    id: 'quarterly',
    name: '元/季度套餐',
    price: 39,
    period: '季度',
    color: '#003D7A',
    hasPromotion: true,
    features: [
      '10条考试信息发布',
      '基础数据查看',
      '标准客服支持',
      '移动端访问',
      '消息推送'
    ],
    benefits: ['限时优惠', '新用户专享', '体验完整功能']
  }
])

const handleBuyPlan = async (plan: PricingPlan) => {
  try {
    await ElMessageBox.confirm(
      `
      <div style="text-align: left;">
        <h3 style="color: ${plan.color}; margin-bottom: 16px;">${plan.name}</h3>
        <p style="font-size: 24px; font-weight: bold; margin-bottom: 12px;">
          <span style="color: ${plan.color};">¥${plan.price}</span>
          <span style="font-size: 14px; color: #999;">/${plan.period}</span>
        </p>
        <div style="margin-bottom: 16px;">
          <p style="font-weight: bold; margin-bottom: 8px;">套餐特权：</p>
          <ul style="padding-left: 20px; line-height: 1.8;">
            ${plan.features.map(f => `<li>${f}</li>`).join('')}
          </ul>
        </div>
        <div style="background: #f5f5f5; padding: 12px; border-radius: 8px; margin-top: 16px;">
          <p style="font-weight: bold; margin-bottom: 8px; color: ${plan.color};">专属福利：</p>
          <ul style="padding-left: 20px; line-height: 1.8;">
            ${plan.benefits.map(b => `<li>${b}</li>`).join('')}
          </ul>
        </div>
      </div>
      `,
      '确认购买',
      {
        confirmButtonText: '立即支付',
        cancelButtonText: '再想想',
        dangerouslyUseHTMLString: true,
        customClass: 'purchase-dialog',
        confirmButtonClass: 'purchase-confirm-btn',
        center: false
      }
    )
    ElMessage.success(`正在跳转到支付页面...`)
  } catch {
    ElMessage.info('已取消购买')
  }
}
</script>

<template>
  <div class="trade-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <h1 class="page-title">套餐与定价</h1>
      <p class="page-subtitle">选择最适合您的智慧招考解决方案</p>
      <!-- 装饰性SVG图案 -->
      <svg class="header-decoration left" width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
        <circle cx="20" cy="20" r="3" fill="#4FACFE" opacity="0.6">
          <animate attributeName="r" values="3;5;3" dur="2s" repeatCount="indefinite" />
        </circle>
        <circle cx="50" cy="40" r="4" fill="#00F2FE" opacity="0.5">
          <animate attributeName="r" values="4;6;4" dur="3s" repeatCount="indefinite" />
        </circle>
        <circle cx="80" cy="15" r="2.5" fill="#7EE8FA" opacity="0.7">
          <animate attributeName="r" values="2.5;4.5;2.5" dur="2.5s" repeatCount="indefinite" />
        </circle>
      </svg>
      <svg class="header-decoration right" width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
        <circle cx="100" cy="20" r="3" fill="#4FACFE" opacity="0.6">
          <animate attributeName="r" values="3;5;3" dur="2.5s" repeatCount="indefinite" />
        </circle>
        <circle cx="70" cy="40" r="4" fill="#00F2FE" opacity="0.5">
          <animate attributeName="r" values="4;6;4" dur="2s" repeatCount="indefinite" />
        </circle>
        <circle cx="40" cy="15" r="2.5" fill="#7EE8FA" opacity="0.7">
          <animate attributeName="r" values="2.5;4.5;2.5" dur="3s" repeatCount="indefinite" />
        </circle>
      </svg>
    </div>

    <!-- 套餐卡片容器 -->
    <div class="pricing-container">
      <PricingCard
        v-for="plan in pricingPlans"
        :key="plan.id"
        :name="plan.name"
        :price="plan.price"
        :period="plan.period"
        :color="plan.color"
        :has-promotion="plan.hasPromotion"
        @buy="handleBuyPlan(plan)"
      />
    </div>
  </div>
</template>

<style scoped>
.trade-page {
  width: 100%;
  min-height: calc(100vh - 75px);
  padding: 60px 20px;
}

.page-header {
  position: relative;
  text-align: center;
  margin-bottom: 60px;
  padding: 40px 20px;
  background: linear-gradient(135deg, rgba(79, 172, 254, 0.05) 0%, rgba(0, 242, 254, 0.05) 100%);
  border-radius: 20px;
  overflow: hidden;
}

.header-decoration {
  position: absolute;
  pointer-events: none;
}

.header-decoration.left {
  top: 20px;
  left: 20px;
}

.header-decoration.right {
  top: 20px;
  right: 20px;
}

.page-title {
  font-size: 42px;
  font-weight: 700;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 16px;
  animation: fadeInDown 0.6s ease;
}

.page-subtitle {
  font-size: 18px;
  color: var(--text-secondary);
  animation: fadeInUp 0.6s ease;
}

.pricing-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  animation: fadeIn 0.8s ease;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 平板响应式 */
@media (max-width: 1024px) {
  .pricing-container {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  .page-title {
    font-size: 36px;
  }

  .page-subtitle {
    font-size: 16px;
  }
}

/* 移动端响应式 */
@media (max-width: 768px) {
  .trade-page {
    padding: 40px 16px;
  }

  .page-header {
    margin-bottom: 40px;
    padding: 30px 16px;
  }

  .page-title {
    font-size: 28px;
  }

  .page-subtitle {
    font-size: 15px;
  }

  .pricing-container {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .header-decoration {
    display: none;
  }
}
</style>

<style>
/* 购买弹窗样式 */
.purchase-dialog {
  max-width: 500px;
  border-radius: 16px;
}

.purchase-dialog .el-message-box__header {
  padding-top: 24px;
}

.purchase-dialog .el-message-box__title {
  font-size: 20px;
  font-weight: 700;
}

.purchase-dialog .el-message-box__content {
  padding: 20px 24px;
  max-height: 60vh;
  overflow-y: auto;
}

.purchase-confirm-btn {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  border: none;
  padding: 12px 32px;
  font-weight: 600;
}

.purchase-confirm-btn:hover {
  background: linear-gradient(135deg, #3d9eef 0%, #00d9ee 100%);
}
</style>
